import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import "../components"
import "../Utils.js" as Utils

Item {
    id: findMusicContent
    anchors.fill: parent
    property var theme: p_theme.currentTheme()
    property double fontSize: 9
    property int activeHeader: 0
    property var headerData: [
        {
            "name": '全部',
            "type": "0"
        },
        {
            "name": '华语',
            "type": "7"
        },
        {
            "name": '欧美',
            "type": "96"
        },
        {
            "name": '日本',
            "type": "8"
        },
        {
            "name": '韩国',
            "type": "16"
        }
    ]
    onActiveHeaderChanged: {
        content.loadData();
    }

    Row {
        id: headerRow
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.leftMargin: 15
        spacing: 10
        Repeater {
            model: ListModel {}
            delegate: headerListDelegate
            Component.onCompleted: {
                model.append(headerData);
            }
        }
    }
    Component {
        id: headerListDelegate
        Text {
            text: name
            color: activeHeader == index ? theme.fontColor : "#8F" + theme.subBackgroundColor2
            font.pointSize: fontSize + 2
            Behavior on color {
                ColorAnimation {}
            }
            MouseArea {
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    activeHeader = index;
                }
            }
        }
    }

    Item {
        id: listHeader
        anchors.top: headerRow.bottom
        width: findMusicContent.width - 20
        height: 40
        // color:"#f6f6f6"
        Row {
            height: parent.height
            width: parent.width - 20
            anchors.horizontalCenter: parent.horizontalCenter
            opacity: 0.8
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.2 - 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                font.italic: true
                font.bold: true
                text: "#"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                text: "封面"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.25
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                elide: Text.ElideRight
                text: "歌曲名称"
            }

            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.3
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
                text: "作曲家"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.25 - 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideRight
                text: "时长"
            }
        }
    }
    Rectangle {
        id: content
        anchors.top: listHeader.bottom
        // anchors.topMargin: 10
        width: parent.width
        anchors.horizontalCenter: parent.horizontalCenter
        height: parent.height - (headerRow.height + 50)
        color: Qt.lighter("#d8deea", 1.2)
        radius: 14
        clip: true
        property bool load: false
        Component.onCompleted: {
            loadData();
        }
        function loadData() {
            load = true;
            contentListModel.clear();
            p_musicRes.getNewMusic(headerData[activeHeader].type).then(res => {
                // print(JSON.stringify(res))
                contentListModel.append(res);
                load = false;
            });
        }

        ListView {
            id: contentListView
            anchors.fill: parent
            model: ListModel {
                id: contentListModel
                property var jsArray: convertModelToArray()
                function convertModelToArray() {
                    return Utils.listModelToJsArray(this, ["id", "name", 'artists', 'coverImage', 'allTime', 'vip']);
                }
            }
            delegate: contentListViewDelegate
            ScrollBar.vertical: CScrollBar {}
        }
        Component {
            id: contentListViewDelegate

            MusicRow {
                parentWidth: contentListView.width - 20
                playList: contentListModel.jsArray
                playInfo: Utils.modelToJsObj(model, ["id", "name", 'artists', 'coverImage', 'allTime', 'vip'])
                index: model.index
            }
        }
    }
    Loading {
        load: content.load
    }
}
